<template>
    <div class="container">
      <div class="main">
        <el-table :data="filteredTableData" border class="eltable">
          <el-table-column fixed type="index" label="序号" width="80"></el-table-column>
          <el-table-column fixed prop="gdrw_state" label="工单状态" width="100">
            <template #default="{ row }">
              {{ dictionaryNames[row.gdrw_state] }}
            </template>
          </el-table-column>
          <el-table-column fixed prop="gdrw_yxj" label="优先级" width="80">
            <template #default="{ row }">
              {{ dictionaryNames[row.gdrw_yxj] }}
            </template>
          </el-table-column>
          <el-table-column fixed prop="gdrw_jd" label="工单进度" width="100">
            <template #default="{ row }">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: `${row.gdrw_jd}%` }">
                  {{ row.gdrw_jd }}%
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="gdrw_code" label="工单号" width="180"></el-table-column>
          <el-table-column prop="gdrw_fzr" label="负责人" width="180"></el-table-column>
          <el-table-column prop="gdrw_scwz" label="生产位置" width="180"></el-table-column>
          <el-table-column prop="cp_code" label="产品编码" width="180"></el-table-column>
          <el-table-column prop="cp_name" label="产品名称" width="180"></el-table-column>
          <el-table-column prop="cp_xh" label="产品型号" width="180"></el-table-column>
          <el-table-column prop="ks_code" label="客户名称" width="180"></el-table-column>
          <el-table-column prop="gdrw_jhsl" label="任务数量" width="180"></el-table-column>
          <el-table-column prop="gdrw_sjscsl" label="完成数量" width="180"></el-table-column>
          <el-table-column prop="gdrw_xqrq" label="交货日期" width="180">
            <template #default="{ row }">
              {{ formatDate(row.gdrw_xqrq) }}
            </template>
          </el-table-column>
          <el-table-column prop="gdrw_jhkgsj" label="计划开始时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.gd_jhkgsj) }}
            </template>
          </el-table-column>
          <el-table-column prop="gdrw_jhwgsj" label="计划完成时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.gd_jhwgsj) }}
            </template>
          </el-table-column>
          <el-table-column prop="gdrw_bz" label="备注" width="180"></el-table-column>
          <el-table-column prop="gd_tcsj" label="投产时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.gd_tcsj) }}
            </template>
          </el-table-column>
          <el-table-column prop="gdrw_sjkgsj" label="开工时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.gdrw_sjkgsj) }}
            </template>
          </el-table-column>
          <el-table-column prop="gdrw_sjwgsj" label="完成时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.gdrw_sjwgsj) }}
            </template>
          </el-table-column>
          <el-table-column prop="create_by" label="创建人" width="180"></el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.create_time) }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
            <template #default="{ row }">
              <el-button type="text" @click="Details(row)">详情</el-button>
              <el-button type="text" @click="openDialog(row)">拆分</el-button>
              <el-button type="text" @click="openDialog(row)">派工</el-button>
              <el-button type="linknpm install  " @click="openDialog(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
          :total="totalItems" layout="total, prev, pager, next, jumper" class="el-pagination">
        </el-pagination>
      </div>
      <el-dialog title="生产工单派工" v-model="dialogVisible"
        style="width: 900px; background-color: #fff; padding: 20px; box-shadow: 0 2px 15px rgba(0,0,0,0.15); border-radius: 30px;">
        <el-form :model="formData" label-width="100px" :rules="formRules" ref="formRef">
          <el-form-item label="工艺路线:" prop="cp_code">
            <el-input v-model="formData.cp_code" placeholder="请选择工艺路线" @click="toggleGYMTK"></el-input>
          </el-form-item>
          <el-form-item label="生产位置:" prop="cp_code">
            <el-input v-model="formData.cp_code" placeholder="请选择生产位置" @click="toggleWZMTK"></el-input>
          </el-form-item>
          <el-form-item label="生产班组:" prop="cp_code">
            <el-input v-model="formData.cp_code" placeholder="请选择生产班组" @click="toggleBZMTK"></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="生产工单详情" v-model="dialogVisibles" custom-class="plan-dialog"
        style="width: 900px; background-color: #fff; padding: 20px; box-shadow: 0 2px 15px rgba(0,0,0,0.15); border-radius: 30px;">
        <el-form :model="formData" label-width="100px" :rules="formRules" ref="formRef">
          <el-row>
            <el-col :span="8">
              <el-form-item label="生产工单号:">
                {{ formData.gd_code }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="优先级:">
                {{ dictionaryNames[formData.gd_yxj] }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务负责人:">
                {{ formData.gd_fzr }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="产品编码:">
                {{ formData.cp_code }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品名称:">
                {{ formData.cp_name }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品分类:">
                {{ dictionaryNames[formData.cp_fl] }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="产品型号:">
                {{ formData.cp_xh }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品品牌:">
                {{ formData.pp_name }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品类型:">
                {{ dictionaryNames[formData.cp_lx] }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户简称:">
                {{ formData.ks_code }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同编码:">
                {{ formData.ht_code }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务数量:">
                {{ formData.gd_jhsl }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="交货时间:">
                {{ formatDate(formData.gd_xqrq) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划开始时间:">
                {{ formatDate(formData.gd_jhkgsj) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划结束时间:">
                {{ formatDate(formData.gd_jhwgsj) }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="生产位置:">
                {{ formData.gd_scwz }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生产班组:">
                {{ formData.gd_scbz }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="投产时间:">
                {{ formatDate(formData.gd_tcsj) }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="工艺路线:">
                {{ formData.gy_name }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生产BOM:">
                {{ formData.bom_code }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="工单进度:">
                <div class="progress-bar">
                  <div class="progress-fill" :style="{ width: `${formData.gd_jd}%` }">
                    {{ formData.gd_jd }}%
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="完成数量:">
                {{ formData.gd_wcsl }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="完成时间:">
  
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="工单状态:">
                {{ dictionaryNames[formData.gd_state] }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合格率:">
  
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:">
                {{ formData.gd_bz }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        ---------------------------------------------------------------------------------------------------------------------------------------------
        <p>生产资料:</p>
        <el-tabs v-model="activeTab" class="custom-tabs">
          <el-tab-pane label="生成BOM" name="bom"></el-tab-pane>
          <el-tab-pane label="产品属性" name="attributes"></el-tab-pane>
          <el-tab-pane label="工艺文件" name="process"></el-tab-pane>
          <el-tab-pane label="产品文档" name="documents"></el-tab-pane>
          <el-tab-pane label="产品图片" name="images"></el-tab-pane>
        </el-tabs>
  
        <!-- 根据 activeTab 的值决定显示哪个表格 -->
        <el-table v-if="activeTab === 'bom'" :data="bomData">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="materialName" label="物料名称" />
          <el-table-column prop="materialCode" label="物料编码" />
          <el-table-column prop="materialType" label="物料类型" />
          <el-table-column prop="materialSpec" label="物料规格" />
          <el-table-column prop="materialUnit" label="物料单位" />
          <el-table-column prop="materialSource" label="物料来源" />
          <el-table-column prop="remarks" label="基本用料" width="100" />
        </el-table>
  
        <el-table v-if="activeTab === 'attributes'" :data="attributesData">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="attributeName" label="属性名称" />
          <el-table-column prop="attributeValue" label="属性值" width="200" />
        </el-table>
  
        <el-table v-if="activeTab === 'process'" :data="processData">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="processName" label="工序名称" />
          <el-table-column prop="processDetail" label="工艺文件" width="200" />
        </el-table>
  
        <el-table v-if="activeTab === 'documents'" :data="documentsData">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="documentName" label="文档名称" />
          <el-table-column prop="uploadDate" label="文档列表" width="200" />
        </el-table>
  
        <el-table v-if="activeTab === 'images'" :data="imagesData">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="imageName" label="产品图片" />
          <el-table-column prop="imageUrl" label="图片列表" width="300" />
        </el-table>
  
        <div style="margin-top: 20px;">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="saveForm">保存</el-button>
        </div>
      </el-dialog>
      <el-dialog v-model="isGYMTKVisible" title="选择工艺"
        style="height: 700px; width: 600px; background-color: #fff; padding: 20px; box-shadow: 0 2px 15px rgba(0,0,0,0.15); border-radius: 30px;">
        <GYMTK @selection-confirmed="handleSelectionConfirmed" @cancel-selection="handleCancelSelection"></GYMTK>
      </el-dialog>
  
      <el-dialog v-model="isWZMTKVisible" title="生产位置"
        style="height: 700px; width: 600px; background-color: #fff; padding: 20px; box-shadow: 0 2px 15px rgba(0,0,0,0.15); border-radius: 30px;">
        <DYMTK @selection-confirmed="handleSelectionConfirmeds" @cancel-selection="handleCancelSelections"></DYMTK>
      </el-dialog>
  
      <el-dialog v-model="isBZMTKVisible" title="生产班组"
        style="height: 700px; width: 600px; background-color: #fff; padding: 20px; box-shadow: 0 2px 15px rgba(0,0,0,0.15); border-radius: 30px;">
        <BZMTK @selection-confirmed="handleSelectionConfirmeds" @cancel-selection="handleCancelSelections"></BZMTK>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import { ref, watchEffect, computed } from 'vue';
  import DYMTK from '../MTK/DYMTK.vue';
  import BZMTK from '../MTK/BZMTK.vue';
  import GYMTK from '../MTK/GYMTK.vue';
  
  export default {
    components: { DYMTK, BZMTK, GYMTK },
    setup() {
      const searchKey = ref('');
      const tableData = ref([]);
      const selectedFilter = ref('');
      const searchTable = ref('');
      const currentPage = ref(1);
      const pageSize = ref(10);
      const totalItems = ref(0);
      const dictionaryNames = ref({}); // 存储字典名称  
      const dialogVisible = ref(false);
      const dialogVisibles = ref(false);
      const formData = ref({});
      const activeTab = ref('bom');
      const isGYMTKVisible = ref(false);
      const isBZMTKVisible = ref(false);
      const isWZMTKVisible = ref(false);
      const Details = async (row) => {
        formData.value = { ...row };
        dialogVisibles.value = true;
      };
      const bomData = ref([
        { id: 1, materialName: '钢材', materialCode: '001', materialType: '金属', materialSpec: 'A', materialUnit: 'kg', materialSource: '供应商A', remarks: '1' },
        { id: 2, materialName: '塑料', materialCode: '002', materialType: '非金属', materialSpec: 'B', materialUnit: 'kg', materialSource: '供应商B', remarks: '2' },
      ]);
      const attributesData = ref([
        { id: 1, attributeName: '颜色', attributeValue: '黑色' },
        { id: 2, attributeName: '尺寸', attributeValue: '100x200' },
      ]);
  
      const processData = ref([
        { id: 1, processName: '切割', processDetail: '钢材切割' },
        { id: 2, processName: '焊接', processDetail: '钢材焊接' },
      ]);
  
      const documentsData = ref([
        { id: 1, documentName: '说明书', uploadDate: '2025-01-01' },
        { id: 2, documentName: '检测报告', uploadDate: '2025-02-01' },
      ]);
  
      const imagesData = ref([
        { id: 1, imageName: '产品图1', imageUrl: 'http://example.com/image1.jpg' },
        { id: 2, imageName: '产品图2', imageUrl: 'http://example.com/image2.jpg' },
      ]);
      const fetchData = async () => {
        try {
          const response = await axios.get('/api/Mes_gdrw/GetMes_SCGD');
          tableData.value = response.data;
          totalItems.value = response.data.length;
        } catch (error) {
          console.error('获取表格数据时出错:', error);
        }
      };
  
      const openDialog = (row) => {
        dialogVisible.value = true;
      };
  
      const handleCurrentChange = (page) => {
        currentPage.value = page;
      };
  
      const filteredTableData = computed(() => {
        const start = (currentPage.value - 1) * pageSize.value;
        return tableData.value.slice(start, start + pageSize.value);
      });
  
      const formatDate = (dateString) => {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
      };
  
      const formatDictionaryName = async (dictionaryId) => {
        if (!dictionaryId) return '';
        if (dictionaryNames.value[dictionaryId]) {
          return dictionaryNames.value[dictionaryId];
        }
        try {
          const response = await axios.get(`/api/Dict/GetName?dictionary_id=${dictionaryId}`);
          dictionaryNames.value[dictionaryId] = response.data;
          return response.data;
        } catch (error) {
          console.error(`获取字典名称时出错: ${error.message}`);
          return '';
        }
      };
      // 关闭对话框
      const closeDialog = () => {
        dialogVisible.value = false;
        dialogVisibles.value = false;
        formData.value = {};
      };
      //显示工艺模态框
      const toggleGYMTK = () => {
        isGYMTKVisible.value = !isGYMTKVisible.value; // 切换显示状态  
      };
      //显示班组模态框
      const toggleBZMTK = () => {
        isBZMTKVisible.value = !isBZMTKVisible.value; // 切换显示状态  
      };
      //显示生产位置模态框
      const toggleWZMTK = () => {
        isWZMTKVisible.value = !isWZMTKVisible.value; // 切换显示状态  
      };
      // 监听表格数据变化，更新字典名称  
      watchEffect(() => {
        filteredTableData.value.forEach((row) => {
          if (row.gdrw_state) {
            formatDictionaryName(row.gdrw_state);
          }
          if (row.gdrw_yxj) {
            formatDictionaryName(row.gdrw_yxj);
          }
          if (row.cp_fl) {
            formatDictionaryName(row.cp_fl);
          }
          if (row.cp_lx) {
            formatDictionaryName(row.cp_lx);
          }
        });
      });
  
      fetchData();
  
      return {
        searchKey,
        tableData,
        selectedFilter,
        searchTable,
        currentPage,
        pageSize,
        totalItems,
        openDialog,
        handleCurrentChange,
        formatDate,
        formatDictionaryName,
        dictionaryNames,
        filteredTableData,
        dialogVisible,
        Details,
        dialogVisibles,
        formData,
        activeTab,
        bomData,
        attributesData,
        processData,
        documentsData,
        imagesData,
        closeDialog,
        toggleGYMTK,
        toggleBZMTK,
        toggleWZMTK,
        isGYMTKVisible,
        isBZMTKVisible,
        isWZMTKVisible
      };
    },
  };  
  </script>
  
  <style>
  .container {
    display: flex;
    gap: 20px;
    height: 95%;
  }
  
  .main {
    width: 80%;
    flex: 1;
    height: 100%;
  }
  
  .header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .progress-bar {
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
  }
  
  .progress-fill {
    height: 100%;
    background-color: #409eff;
    border-radius: 15px 0 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    font-weight: bold;
    transition: width 0.3s;
  }
  
  .custom-tabs .el-tabs__item {
    border-radius: 12px 12px 0 0;
  }
  
  .custom-tabs .el-tabs__item.is-active {
    background-color: #409eff;
    /* 活动选项卡的背景色 */
    color: white;
    /* 活动选项卡的字体颜色 */
  }
  
  .custom-tabs .el-tabs__item.is-inactive {
    background-color: #f5f7fa;
    /* 非活动选项卡的背景色 */
    color: #606266;
    /* 非活动选项卡的字体颜色 */
  }
  
  .custom-tabs .el-tabs__nav {
    margin-bottom: -1px;
    /* 使选项卡与下方内容相连 */
  }
  
  .el-table {
    margin-top: 20px;
  }
  .eltable {
  height: 100%;
  background-color: rgba(255, 255, 255, 0); /* 设置表格背景色为白色，并带有50%的透明度 */
}
.el-pagination {  
  margin-bottom: 10px; /* 设置下边距为10px */  
  margin-top: 5px;     /* 设置上内边距为5px */ 
}  
  </style>